<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">
                    <a-col :span="6" :sm="6">
                        <a-form-item label="项目编号">
                            <a-input placeholder="请填写项目编号" v-model="queryParam.cxj_xmbh"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" :sm="6">
                        <a-form-item label="项目名称">
                            <a-input placeholder="请填写项目名称" v-model="queryParam.cxj_mc_zw"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" :sm="6">
                        <a-form-item label="申报单位">
                            <a-input placeholder="请填写申报单位" v-model="queryParam.sbdw_qymc"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" :sm="6">
                        <a-form-item label="是否分配">
                            <a-select v-model="queryParam.is_pf" placeholder="请选择是否分配">
                                <a-select-option value="">请选择</a-select-option>
                                <a-select-option value="Y">是</a-select-option>
                                <a-select-option value="N">否</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" :sm="6">
                        <a-form-item label="所属集团">
                            <a-select v-model="queryParam.ssjtid" placeholder="请选择所属集团">
                                <a-select-option v-for="group in groupData" :key="group.jttjdwMc" :value="group.id">
                                    {{group.jttjdwMc}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" :sm="6">
                        <a-form-item label="形审状态">
                            <a-select v-model="queryParam.xmztbh" placeholder="请选择形审状态">
                                <a-select-option value="">请选择</a-select-option>
                                <a-select-option value="301">待形审</a-select-option>
                                <a-select-option value="302">材料补正</a-select-option>
                                <a-select-option value="303">不通过</a-select-option>
                                <a-select-option value="304">通过</a-select-option>
                                <a-select-option value="305">材料补正已提交</a-select-option>

                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6" :sm="6">
                        <a-form-item label="年份">
                            <a-date-picker
                                mode="year"
                                v-model="queryParam.shijian"
                                format="YYYY"
                                :open='yearShowOne'
                                @openChange="openChangeOne"
                                @panelChange="onYearChange"
                                placeholder="请选择年份"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="6">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <!-- 查询区域-END -->
        <div class="tjdata">
            　<span>总数量：{{tjdata.sum}}</span>
            　<span>待形审：{{tjdata.dxs}}</span>
            　<span>材料补正提交：{{tjdata.clbzytj}}</span>
            　<span>材料补正：{{tjdata.clbz}}</span>
            　<span>形审通过：{{tjdata.xsytg}}</span>
            　<span>形审不通过：{{tjdata.xswtg}}</span>
        </div>
        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <!-- <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
            <a-button type="primary" icon="download" @click="handleExportXls('形式审查结果表')">导出</a-button>
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
                <a-button type="primary" icon="import">导入</a-button>
            </a-upload> -->
            <!-- 高级查询区域 -->
            <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
            <a-dropdown v-if="selectedRowKeys.length > 0">
                <a-menu slot="overlay">
                <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
                </a-menu>
                <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
            </a-dropdown> -->
        </div>

        <!-- table区域-begin -->
        <div class="xslist">
        <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div> -->
            <div class="xslist_left">
                <a-table
                    ref="table"
                    size="middle"
                    :scroll="{x:460}"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    :customRow="selectxs"
                    class="CxjXsscListGly j-table-force-nowrap"
                    :rowClassName="setRowClassName"
                    @change="handleTableChange">

                    <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                    </template>
                    <template slot="imgSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
                    </template>
                    <template slot="fileSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                    <a-button
                        v-else
                        :ghost="true"
                        type="primary"
                        icon="download"
                        size="small"
                        @click="downloadFile(text)">
                        下载
                    </a-button>
                    </template>

                    <span slot="action" slot-scope="text, record">
                        <a @click.stop="handlePreview(record)">查看</a>
                        <a-divider type="vertical" />
                        <a @click.stop="getqueryHistory(record)">记录</a>
                    <!--<a @click="handleEdit(record)">编辑</a>

                    <a-divider type="vertical" />
                    <a-dropdown>
                        <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                        <a-menu slot="overlay">
                        <a-menu-item>
                            <a @click="handleDetail(record)">详情</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                            <a>删除</a>
                            </a-popconfirm>
                        </a-menu-item>
                        </a-menu>
                    </a-dropdown> -->
                    </span>

                </a-table>
            </div>
            <div class="xslist_right">
                <div class="">
                    <p class="xslist_right_title1">{{new Date().getFullYear()}}年度电力创新奖形式审查表</p>
                    <!--<p class="xslist_right_xmbh">成果编号：{{cxj_xmbh}}</p>
                    <p class="xslist_right_cglb">成果类别：</p>-->
                    <div class="tableForm">
                        <table style="text-align:center;" border="" cellspacing="0" align="center" cellpadding="">
                            <tr>
                              <td width="180">成果编号：</td>
                              <td class="td_text">{{cxj_xmbh}}</td>
                              <td width="180">成果类别：</td>
                              <td class="td_text"></td>
                            </tr>
                            <tr>
                                <td width="180">申报单位：</td>
                                <td colspan="3" class="td_text">{{sbdw_qymc}}</td>
                            </tr>
                            <tr>
                                <td width="180">推荐单位：</td>
                                <td colspan="3" class="td_text">{{jttjdw_mc}}</td>
                            </tr>
                            <tr>
                                <td width="180">项目名称：</td>
                                <td colspan="3" class="td_text">{{cxj_mc_zw}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div>
                    <p class="xslist_right_title2">申报材料信息</p>
                    <div class="tableList xstableList">
                        <div>
                            <div class="table_head">
                                <p class="flex0">序号</p>
                                <p class="flex2">材料审查项</p>
                                <p class="flex01">添加说明</p>
                                <p class="flex02">说明</p>
                            </div>
                            <div class="table_cont">
                                <div class="table_contli" v-for="(item, index) in queryxslist" :key="index">
                                    <div class="flex_box">
                                        <div class="xsindex flex0">{{index+1}}</div>
                                        <div class="xswtinfo flex2">
                                            <div class="xswtLbmc">{{item.xswtLbmc}}</div>
                                            <div class="xswtlist">
                                                <div class="xswtdetail" v-for="(item1, index1) in item.List" :key="index1">
                                                    <div class="xswtMc">{{item1.xswtMc}}</div>
                                                    <div class="xsselect">
                                                        <a-button type="link" @click="addDescription(item1)">说明</a-button>
                                                    </div>
                                                    <div class="xsarea">
                                                        <textarea v-model="item1.xsscBz">说明</textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btnlist">
                        <a-button class="tongguo" type="primary" @click="submit('304')">通过</a-button>
                        <a-button class="btongguo" type="primary" @click="submit('303')">不通过</a-button>
                        <a-button class="buzheng" type="primary" @click="submit('302')">补正</a-button>
                        <a-button class="zancun" type="primary" @click="submit('0')">暂存</a-button>
                    </div>
                </div>
            </div>
        </div>
        <cxj-xssc-modal ref="modalForm" @ok="modalFormOk"></cxj-xssc-modal>
        <cxj-xssc-history ref="modalForm" :expertFlag="expertFlag" :recordId="recordId" :flId="fl_id"></cxj-xssc-history>
        <add-description ref="addDescription" :xswtbh="xswtbh" :showFlag="showFlag" :sbnd="shijian" :flid="fl_id" @callbackDescription="callbackDescription"></add-description>
    </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CxjXsscModal from './modules/CxjXsscModal'
import CxjXsscHistory from './modules/CxjXsscHistory'
import {
    cxjsbTjdwlist,
    cxjXsGetZjFz,
    queryByFlId,
    // list_jlb,
    cxjsbSsjtlist
} from "@/api/api"
import {
  postAction,
  xssubmit,
  queryHistory,
  queryXsscMxByXsscId,
  list_jlb,
  queryXsjlFirst,
  xsscTjGl,
  list_jlb_gl
} from "@/api/manage"
import moment from 'moment'
import ZlFjQtFormVue from './modules/ZlFjQtForm.vue'
import Vue from 'vue'
import { USER_INFO, ACCESS_TOKEN } from "@/store/mutation-types"
import AddDescription from './CxjXsscListGly/index'


export default {
    name: 'CxjXsscListJs',
    // mixins:[JeecgListMixin, mixinDevice],
    mixins:[mixinDevice],
    components: {
      CxjXsscModal,
      CxjXsscHistory,
      AddDescription
    },
    data () {
        return {
            description: '形式审查结果表管理页面',
            // 表头
            columns: [
                {
                    title: '序号',
                    dataIndex: '',
                    // key:'rowIndex',
                    width:40,
                    align:"center",
                    customRender:function (t,r,index) {
                        return parseInt(index)+1;
                    }
                },
                {
                    title:'成果编号',
                    align:"center",
                    width:100,
                    dataIndex: 'cxj_xmbh'
                },
                {
                    title:'成果名称',
                    dataIndex: 'cxj_mc_zw'
                },
                {
                    title:'形审状态',
                    align:"center",
                    dataIndex: 'xszt',
                    width:80,
                },
                // {
                //     title:'是否有效',
                //     align:"center",
                //     dataIndex: 'isValid',
                //     customRender: (text) => (text ? filterMultiDictText(this.dictOptions['isValid'], text) : ''),
                // },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align:"center",
                    fixed:"right",
                    width:90,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            url: {
                list: "/cxj/cxjXssc/list_jlb_xxh",
                delete: "/cxj/cxjXssc/delete",
                deleteBatch: "/cxj/cxjXssc/deleteBatch",
                exportXlsUrl: "/cxj/cxjXssc/exportXls",
                importExcelUrl: "cxj/cxjXssc/importExcel",

            },

            dictOptions:{},
            superFieldList:[],
            fileStatus: "",
            selectedRowKeys: [],
            selectionRows: [],
            loading: false,
            isorter: {
                column: 'createTime',
                order: 'desc',
            },
            dataSource: [],
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                },
                showQuickJumper: false,
                showSizeChanger: true,
                total: 0
            },
            queryParam: {},
            recommenderData: [],
            xszjfzData: [],
            queryxslist: [],
            // queryIdList: [],
            cxjXsscFzId: '',
            cxj_cxj_id: '',
            jttjdw_mc: '',
            cxj_mc_zw: '',
            sbdw_qymc: '',
            cxj_xmbh: '',
            expertFlag: false,
            recordId: '',
            queryxsmxlist: [],
            fl_id: '',
            yearShowOne: false,
            groupData: [],
            shijian: moment(new Date()).format('YYYY'),
            curIndex: 0,
            tjdata: {},
            showFlag: false,
            declareId: '',
            xswtbh: ''
        }
    },
    created() {
        this.$set(this.dictOptions, 'isValid', [{text:'是',value:'Y'},{text:'否',value:'N'}])
        this.getSuperFieldList();
        this.getcxjsbTjdwlist();
        this.getcxjXsGetZjFz();
        this.getCxjsbSsjtlist();
        this.getxsscTjGl();
    },
    computed: {
        importExcelUrl: function(){
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
        },
    },
    methods: {
        // 添加说明
        addDescription(record) {
            this.xswtbh = record.xswtBh;
            this.declareId = record.id;
            this.fl_id = record.flId
            this.showFlag = !this.showFlag;
        },
        // 回显添加说明
        callbackDescription(data) {
            console.log(data, this.queryxslist)
            this.queryxslist.forEach(record => {
                record.List.forEach(item => {
                    if (item.id === this.declareId) {
                        console.log('信息====', item)
                        this.$set(item, 'xsscBz', data)
                    }
                })
            })
            this.$forceUpdate()
        },
        // 查看
        handlePreview(record){
            let token = Vue.ls.get(ACCESS_TOKEN);
            sessionStorage.setItem('token', token);
            let routeData = this.$router.resolve({
                path: '/shenbao/declare',
                query: {
                    type: record.fl_id,
                    cxj_cxj_id: record.id,
                    isHead: 2,
                    from: 'gly',
                    xsztbh: record.xsztbh,
                    cxj_xmbh: record.cxj_xmbh,
                    cxj_mc_zw: record.cxj_mc_zw
                }
            });
            window.open(routeData.href, '_blank');
        },
        searchQuery() {
            this.loadData(1);
        },
        // 弹出日历和关闭日历的回调
        openChangeOne(status){
            //status是打开或关闭的状态
            if(status){
                this.yearShowOne =  true
            }
        },
        // 得到年份选择器的值
        onYearChange(value){
            this.shijian = moment(value).format('YYYY');
            this.queryParam.shijian = moment(value).format('YYYY');
            this.yearShowOne = false;
        },
        // 获取所属集团数据
        getCxjsbSsjtlist(){
            cxjsbSsjtlist().then(res=>{
                if (res.success) {
                    this.groupData = res.result;
                }
            })
        },
        getxsscTjGl() {
            const self = this;
            xsscTjGl(self.shijian).then(res=>{
                if (res.code=='200') {
                    self.tjdata = res.result;
                }
            })
        },
        getQueryField() {
            //TODO 字段权限控制
            var str = "id,";
            this.columns.forEach(function (value) {
                str += "," + value.dataIndex;
            });
            return str;
        },
        searchReset() {
            this.queryParam = {};
            this.shijian = moment(new Date()).format('YYYY');
            this.queryParam.shijian = this.shijian;
            this.loadData(1);
        },
        loadData(arg) {
            if (arg==1) {
               this.ipagination.current = 1;
            }
            this.loading = true;
            this.queryParam.shijian = this.shijian;
            let params = Object.assign(this.queryParam, this.isorter, this.filters)
            params.field = this.getQueryField();
            if (this.curIndex == +(this.ipagination.pageSize) - 1) {
                params.pageNo = this.ipagination.current+1;
            } else {
                params.pageNo = this.ipagination.current;
            }
            this.ipagination.current = params.pageNo;
            params.pageSize = this.ipagination.pageSize;
            // console.log(params, 'params')
            // postAction(this.url.list, params).then((res) => {
            list_jlb_gl(params).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.records || res.result;
                    var ind;
                    if(arg == 'submit') {
                        if (this.curIndex == +(this.ipagination.pageSize) - 1) {
                            this.curIndex = 0;
                        } else {
                            if (this.dataSource.length == +(this.curIndex) +1) {
                                this.curIndex = 0;
                            } else {
                                this.curIndex = +(this.curIndex) +1;
                            }
                        }
                    } else {
                        this.curIndex = 0;
                    }
                    ind = this.curIndex;
                    // console.log(ind, 'ind')
                    this.getqueryByFlId(res.result.records.length && res.result.records[ind].fl_id, res.result.records.length && res.result.records[ind].id);
                    this.fl_id = res.result.records.length && res.result.records[ind].fl_id;
                    this.cxj_cxj_id =res.result.records.length && res.result.records[ind].id;
                    this.jttjdw_mc =res.result.records.length && res.result.records[ind].jttjdw_mc;
                    this.cxj_mc_zw =res.result.records.length && res.result.records[ind].cxj_mc_zw;
                    this.sbdw_qymc =res.result.records.length && res.result.records[ind].sbdw_qymc;
                    this.cxj_xmbh = res.result.records.length && res.result.records[ind].cxj_xmbh;
                    // this.getqueryByFlId(res.result.records.length && res.result.records[0].fl_id, res.result.records.length && res.result.records[0].id);
                    // this.fl_id = res.result.records.length && res.result.records[0].fl_id;
                    // this.cxj_cxj_id =res.result.records.length && res.result.records[0].id;
                    // this.jttjdw_mc =res.result.records.length && res.result.records[0].jttjdw_mc;
                    // this.cxj_mc_zw =res.result.records.length && res.result.records[0].cxj_mc_zw;
                    // this.sbdw_qymc =res.result.records.length && res.result.records[0].sbdw_qymc;
                    // this.cxj_xmbh = res.result.records.length && res.result.records[0].cxj_xmbh;
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                }
                if (res.code === 510) {
                    this.$message.warning(res.message)
                }
                this.loading = false;
            })
        },
        getcxjsbTjdwlist(){
            cxjsbTjdwlist().then(res=>{
                if (res.success) {
                    this.recommenderData = res.result;
                }
            })
        },
        getcxjXsGetZjFz() {
            let user = Vue.ls.get(USER_INFO);
            cxjXsGetZjFz({sysZjId: user.id}).then(res=>{
                if(res.success) {
                    this.xszjfzData = res.result;
                    if (res.result.length) {
                        this.cxjXsscFzId = res.result[0].cxj_xssc_fz_id;
                        // this.queryParam.cxjXsscFzId = this.cxjXsscFzId;
                    }
                    this.loadData();
                }
            })
        },
        selectxs(record, index) {
            return {
                on: {
                    click: () => {
                        this.curIndex = index;
                        this.fl_id = record.fl_id;
                        this.cxj_cxj_id = record.id;
                        this.jttjdw_mc =record.jttjdw_mc;
                        this.cxj_mc_zw =record.cxj_mc_zw;
                        this.sbdw_qymc =record.sbdw_qymc;
                        this.cxj_xmbh = record.cxj_xmbh;
                        this.getqueryByFlId(record.fl_id, record.id);
                    }
                }
            }
        },
        setRowClassName (record, index) {
            return record.id === this.cxj_cxj_id ? 'clickRowStyl' : '';
        },
        getqueryHistory(record) {
            this.expertFlag = !this.expertFlag;
            this.recordId = record.id;
            this.fl_id = record.fl_id;
        },
        getqueryByFlId(fl_id, id) {
            queryByFlId({id:fl_id}).then(res=>{
                if (res.code=='200') {
                    this.getqueryXsjlFirst(id)
                    this.queryxslist = res.result;
                }
            })
        },
        getqueryXsjlFirst(id) {
            queryXsjlFirst(id).then(res=>{
                this.queryxsmxlist = res.result;
                for (var i=0;i<this.queryxslist.length;i++) {
                    this.queryxslist[i].xsscSffh = 'Y';
                    // this.queryxslist[i].xsscBz = '';
                    for (var j=0;j<this.queryxsmxlist.length;j++) {
                        if (this.queryxslist[i].xswtBh == this.queryxsmxlist[j].xswtBh) {
                            this.queryxslist[i].xsscSffh = this.queryxsmxlist[j].xsscSffh;
                            this.queryxslist[i].xsscBz = this.queryxsmxlist[j].xsscBz;
                        }
                    }
                }
                this.queryxslist = this.sortarr(this.queryxslist);
            })
        },
        sortarr(arr) {
            let dataArr = [];
            arr.map(mapItem => {
                if (dataArr.length == 0) {
                    dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
                } else {
                    let res = dataArr.some(item=> {
                        if (item.xswtLb == mapItem.xswtLb) {
                            item.List.push(mapItem)
                            return true
                        }
                    })
                    if (!res) {
                        dataArr.push({ xswtLb: mapItem.xswtLb,xswtLbmc: mapItem.xswtLbmc, List: [mapItem] })
                    }
                }
            })
            return dataArr
        },
        selectChange(e, index, index1, xsscSffh) {
            if (e == xsscSffh) {
                this.queryxslist[index].List[index1].xsscSffh = xsscSffh;
            } else {
                this.queryxslist[index].List[index1].xsscSffh = e;
            }
            this.queryxslist = Object.assign([], this.queryxslist)
            // console.log(this.queryxslist ,'33333')
        },
        submit(zt) {
            let that = this;
            var xssc_mx = [];
            for(var i = 0; i < this.queryxslist.length; i++) {
                for (var j = 0; j < this.queryxslist[i].List.length; j++) {
                    let item = this.queryxslist[i].List[j]
                    xssc_mx.push({
                        xsscSffh: item.xsscBz ? 'N' : 'Y',
                        xsscBz: item.xsscBz,
                        xswtBh: item.xswtBh,
                    })
                }
            }
            /* if(zt == '304') {
                var a = xssc_mx.every( (val) => val.xsscSffh=='Y');
                if (!a) {
                    this.$message.warning('请设置每一项都合格');
                    return
                }
            } else if (zt=='303') {
                var c = xssc_mx.some( (val) => val.xsscSffh=='N');
                var b = false;
                for (var i=0;i<xssc_mx.length;i++) {
                    if (xssc_mx[i].xsscSffh == 'N') {
                        if (xssc_mx[i].xsscBz == '') {
                            b = false;
                        } else {
                            b = true;
                        }
                    }
                }
                if (!b || !c) {
                    this.$message.warning('请设置不合格项和说明信息')
                    return
                }
            } */
            xssubmit(xssc_mx, that.cxj_cxj_id, zt).then(res=>{
                if (res.success) {
                    this.$message.success('提交成功');
                    // this.loadData(1);
                    this.loadData('submit');
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        initDictConfig(){},
        getSuperFieldList(){
            let fieldList=[];
            fieldList.push({type:'string',value:'cxjCxjId',text:'成果ID',dictCode:''})
            fieldList.push({type:'string',value:'xsscJg',text:'形审结果',dictCode:''})
            fieldList.push({type:'string',value:'userId',text:'操作人',dictCode:''})
            fieldList.push({type:'switch',value:'isValid',text:'是否有效'})
            this.superFieldList = fieldList
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        onClearSelected() {
            this.selectedRowKeys = [];
            this.selectionRows = [];
        },
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },
        modalFormOk() {
            // 新增/修改 成功时，重载列表
            this.loadData();
            //清空列表选中
            this.onClearSelected()
        },
    }
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>
<style lang="less">
.xslist {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .xslist_left {
        width: 460px;
    }
    .xslist_right {
        flex: 1;
        margin-left: 20px;
        width: 670px;
    }
}
.tjdata {
    span {
        margin-right:20px;
    }
}
.clickRowStyl {
    background-color:#e6f7ff;
}
.ant-table-tbody>tr {
    cursor: pointer;
}
.CxjXsscListGly {
    .ant-table-thead>tr th{
      padding:8px 3px!important;
      font-size:14px;
      text-align: center;
    }
    .ant-table-tbody>tr td{
      font-size: 14px;
      padding:10px 3px!important;
      word-break: break-all;
      white-space: normal;
      word-wrap:break-word;
    }
    .ant-table-tbody>tr td:nth-child(3){
        max-width: 120px;
        white-space: break-spaces;
    }
}
.tableForm {
    margin-top: 11px;
    table {
        border: 1px solid #ECEBEB;
        width: 100%;
        tr {
            height: 30px;
            td {
                color: #333333;
                font-size: 14px;
                font-weight: 400;
                i {
                    color: #CB0C0C;
                    margin-right: 5px;
                }
                &.td_text {
                    text-align: left;
                    padding: 0 20px;
                }
                input {
                    width: 100%;
                    height: 100%;
                    border: 0;
                    outline: 0;
                }
            }
        }
    }
}
.xstableList {
    .table_head {
        background: #F5F5F5;
        height: 54px;
        width:100%;
        display: flex;
        align-items: center;
        p {
            height: 54px;
            line-height: 54px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin:0;
            text-align: center;
        }
    }
    .table_cont {
        border-left: 1px solid #ECEBEB;
        border-right: 1px solid #ECEBEB;
        .table_contli {
            border-bottom: 1px solid #ECEBEB;
        }
        p {
            margin-bottom:0;
            font-size: 14px;
        }
        div {
            font-size: 14px;
        }
        .xswtinfo {
            display: flex;
            align-items: center;
            border-left: 1px solid #ECEBEB;
            border-right: 1px solid #ECEBEB;
        }
        .xswtLbmc {
            min-width: 100px;
            width:16%;
            text-align:center;
        }
        .xswtlist {
            flex:1;
            border-left: 1px solid #ECEBEB;
            .xswtdetail {
                display: flex;
                align-items: center;
                border-bottom: 1px solid #ECEBEB;
                &:last-child {
                    border-bottom: none;
                }
            }
            .xswtMc {
                flex:1;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding: 0 10px;
                border-right: 1px solid #ECEBEB;
                min-height:60px;
            }
            .xsselect {
                min-width: 90px;
                width:20%;
                min-height:60px;
                text-align:center;
                border-right: 1px solid #ECEBEB;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .xsarea {
                min-width: 120px;
                width:32%;
                display: flex;
                justify-content: center;
                align-items: center;
                textarea {
                    width: 96%;
                    min-height: 50px;
                    outline: none;
                    border: 1px solid #ECEBEB;
                    border-radius: 4px;
                }
            }
        }
    }
    .flex_box {
        display: flex;
        align-items: center;
    }
    .flex0 {
        min-width: 30px;
        text-align:center;
        width:5%;
    }
    .flex1 {
        flex:1;
    }
    .flex01 {
      min-width: 90px;
      width: 16%;
    }
    .flex02 {
        width: 26%;
    }
    .flex2 {
        flex:2;
    }
}
.tableList {
    margin-top: 30px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 54px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                }
                textarea {
                    border: none;
                    outline: none;
                }
            }
        }
    }
}
.xslist_right_title1 {
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 29px;
    width: 100%;
    text-align: center;
}
.xslist_right_xmbh {
    width:60%;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 29px;
    display: block;
    float: left;
}
.xslist_right_cglb {
  width: 40%;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 29px;
  display: block;
  float: left;

}
.xslist_right_title2 {
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 25px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.btnlist {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    button {
        margin: 0 20px;
        border: none;
    }
    .tongguo {
        background: rgba(24, 144, 255, 0.8);
    }
    .btongguo {
        background: rgba(224, 32, 32, 0.8);;
    }
    .buzheng {
        background: rgba(250, 100, 0, 0.8);
    }
    .zancun {
        background: rgba(247, 181, 0, 0.8);
    }
}
  .ant-divider, .ant-divider-vertical {
    margin:0px 5px;
  }
</style>